// 保险信息

import { useGetToken } from '@/utils/request';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Card, Col, Form, Input, InputNumber, Modal, Row, Upload, message } from 'antd';
import React, { useEffect } from 'react';
import { useIntl } from 'umi';

type Props = {
  visible: boolean;
  handleCancel: () => void;
  value: Record<string, any>[];
  onChange: (value: any) => void;
  disabled?: boolean;
};
const InsuranceModal: React.FC<Props> = ({
  visible,
  handleCancel,
  value,
  onChange,
  disabled = false,
}) => {
  const intl = useIntl();
  const [form] = Form.useForm();
  const { urlAction, token } = useGetToken();
  useEffect(() => {
    if (visible) {
      form.setFieldValue('insuranceProof', value?.length > 0 ? value : [{}]);
    }
  }, [visible, form, value]);
  return (
    <Modal
      className="bank insurance"
      footer={false}
      width={660}
      closeIcon={null}
      open={visible}
      destroyOnClose
    >
      <div style={{ fontWeight: 'bold', fontSize: 23 }}>
        {intl.formatMessage({ id: 'home.insurance' })}
      </div>
      <div style={{ color: '#999', margin: '10px 0 24px' }}>
        {intl.formatMessage({ id: 'home.insurance_word' })}
      </div>
      <Form
        disabled={disabled}
        form={form}
        labelCol={{ span: 0 }}
        name="insure"
        autoComplete="off"
        onFinish={async (values: any) => {
          onChange(values);
          handleCancel();
        }}
      >
        <Form.List name="insuranceProof">
          {(fields, { add, remove }) => (
            <>
              <div
                style={{
                  display: 'flex',
                  rowGap: 24,
                  flexDirection: 'column',
                }}
              >
                {fields.map((field, index) => (
                  <React.Fragment key={field.key}>
                    <Row style={{ marginBottom: -12 }} justify="space-between">
                      <Col style={{ fontSize: 16 }}>
                        {intl.formatMessage({ id: 'home.insurance_detail' }, { num: index + 1 })}
                      </Col>
                      {!disabled && (
                        <Col
                          style={{ cursor: 'pointer' }}
                          onClick={() => {
                            remove(field.name);
                          }}
                        >
                          <DeleteOutlined style={{ fontSize: 16 }} />
                        </Col>
                      )}
                    </Row>
                    <Card
                      style={{ background: '#F5F6F8', padding: '24px' }}
                      size="small"
                      key={field.key}
                    >
                      <Form.Item
                        label={intl.formatMessage({ id: 'home.insurance_val' })}
                        name={[field.name, 'amount']}
                        rules={[
                          {
                            required: true,
                          },
                        ]}
                      >
                        <InputNumber
                          variant="borderless"
                          controls={false}
                          style={{
                            width: '100%',
                            background: '#fff',
                            padding: '9px 0',
                            borderRadius: 8,
                          }}
                          addonBefore={
                            <div style={{ padding: '0 0 0  10px', marginRight: -12 }}>$</div>
                          }
                          placeholder={intl.formatMessage({ id: 'home.insurance_val' })}
                        />
                      </Form.Item>
                      <Form.Item
                        label={intl.formatMessage({ id: 'home.insurance_content' })}
                        name={[field.name, 'content']}
                        rules={[
                          {
                            required: true,
                          },
                        ]}
                      >
                        <Input.TextArea
                          variant="borderless"
                          autoSize={{ minRows: 4, maxRows: 5 }}
                          style={{
                            width: '100%',
                            background: '#fff',
                            borderRadius: 8,
                            padding: '10px 16px',
                          }}
                          placeholder={intl.formatMessage({ id: 'home.insurance_content' })}
                        />
                      </Form.Item>
                      <Form.Item
                        getValueFromEvent={(e: any) => {
                          if (Array.isArray(e)) {
                            return e;
                          }
                          return e?.fileList.map((file: any) => {
                            const { status, response } = file;

                            if (status == 'done') {
                              if (response?.code == '100200') {
                                file.url = file.response.data;
                              } else {
                                file.status = 'error';
                                message.error({
                                  key: 'update',
                                  content: response?.message || 'error',
                                });
                              }
                            }
                            return file;
                          });
                        }}
                        valuePropName="fileList"
                        name={[field.name, 'urls']}
                      >
                        <Upload
                          headers={{ Authorization: `Bearer ${token}` }}
                          action={urlAction}
                          accept=".jpg,.png,.pdf,.jpeg"
                          listType="text"
                        >
                          <Button className="default_btn bank_btn" icon={<PlusOutlined />}>
                            {intl.formatMessage({ id: 'home.insurance_upload' })}
                          </Button>
                        </Upload>
                      </Form.Item>
                    </Card>
                  </React.Fragment>
                ))}
              </div>
              <Button style={{ color: '#666', marginTop: 24, height: 40 }} onClick={() => add()}>
                <PlusOutlined /> {intl.formatMessage({ id: 'home.insurance_add' })}
              </Button>
            </>
          )}
        </Form.List>
        <Row gutter={[24, 0]} justify="center" style={{ marginTop: 40 }}>
          <Col span={12}>
            <Button
              disabled={false}
              onClick={() => {
                handleCancel();
              }}
              className="cancel_btn"
            >
              {intl.formatMessage({ id: 'home.cancel' })}
            </Button>
          </Col>
          {!disabled && (
            <Col span={12}>
              <Button htmlType="submit" style={{ width: '100%', height: '60px' }} type="primary">
                {intl.formatMessage({ id: 'home.save' })}
              </Button>
            </Col>
          )}
        </Row>
      </Form>
    </Modal>
  );
};

export default InsuranceModal;
